<!--
* @name: 侧边文章目录
* @author: DuanYiPeng
* @date: 2020-08-03
-->
<template>
    <div class='sideDirectory'>
        <div class="mask" v-if="menuShow" @click="closeDirectory"></div>
        <div class="iconBtn" ref="iconBtn" :style="{'overflowY':!menuShow?'hidden':'auto'}">
            <span class="iconfont iconml " v-if="!menuShow"  @click="openBtn"></span>
            <template v-else>
                <div class="icn-main" >
                    <div
                        flex="cross:top"
                        class="row"
                        v-for="(item,index) in directoryList"
                        :style="[
                            {'fontSize':hClass[item.tagName].fz},
                            {'font-weight':hClass[item.tagName].fw},
                            {'color':selectId == item.id ?'#1296db':'#585858'}
                        ]"
                        :key="index"
                        @click="scrollTo(item.id)">
                        <span class="sing" flex-box="0" :style="{'marginRight':item.level/3+'rem' }">{{item.tagName}}</span>
                        {{item.innerText}}
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    import Velocity from "velocity-animate"
    export default {
        name: "sideDirectory",
        props:{
            directoryList:{
                type:Array,
                default:()=>{
                    return []
                }
            }
        },
        components: {},
        data() {
            return {
                // 菜单状态
                menuShow:false,
                // 标题样式
                hClass:{
                    'h1':{
                        'fz':'0.48rem',
                        'fw':'800'
                    },
                    'h2':{
                        'fz':'0.42rem',
                        'fw':'600'
                    },
                    'h3':{
                        'fz':'0.37rem',
                        'fw':'500'
                    },
                    'h4':{
                        'fz':'0.32rem',
                        'fw':'400'
                    },
                    'h5':{
                        'fz':'0.32rem',
                        'fw':'400'
                    },
                    'h6':{
                        'fz':'0.32rem',
                        'fw':'400'
                    },
                },
                // 选中id
                selectId:null
            }
        },
        created() {
        },
        mounted() {
        },
        computed: {},
        methods: {
            // 滚动到指定位置
            scrollTo(id){
                this.selectId = id;
                let parentEl = this.$parent.$el;
                let idEl = document.getElementById(id)
                Velocity(idEl, "scroll", { duration: 500, easing: "easeOutQuart", container: parentEl  });
            },
            // 打开目录
            openBtn(){
                let iconBtn = this.$refs.iconBtn;
                Velocity(iconBtn, {
                    width: "70%",
                    height:'60%',
                    borderRadius:'.32rem',
                    backgroundColorAlpha:1
                }, {
                    easing:  "linear" ,
                    duration: 300,
                    complete:()=>{
                        this.menuShow = true
                    }
                });
            },
            // 关闭按钮
            closeDirectory(){
                this.menuShow = false;
                let iconBtn = this.$refs.iconBtn;
                Velocity(iconBtn, 'reverse',{
                    easing:  "easeOutQuart" ,
                    duration: 250
                });

            }
        },
    }
</script>
<style scoped lang='scss'>
    .sideDirectory{
        @media screen and (max-width:959px){
            .iconBtn{
                width: 1.12rem;
                height: 1.12rem;
                line-height: 1.12rem;
                text-align: center;
                position: fixed;
                right: .32rem;
                bottom:3rem;
                color: $base-color;
                border-radius: 50%;
                background-color:rgba(255,255,255,.6);
                box-shadow: 0 0 .22rem #afafaf;
                z-index: 1001;
                overflow-y: auto;
                .iconml{
                    font-size: .56rem;
                    padding: 0;
                }
                .icn-main{
                    padding: .32rem;
                    text-align: left;
                    .row{
                        color: #585858;
                        margin-bottom: .32rem;
                        transition: color .2s ease-in;
                        .sing{
                            font-style:italic;
                            padding: 0;
                            color:#e1e1e1;
                            margin-right: .10rem;
                            font-size: .32rem
                        }
                    }
                }
            }
            .mlBox{
                position: absolute;
                background: #ffffff;
                box-shadow: 0 0 .26rem #999999;
            }
        }

        .mask{
            @include boxBase();
            opacity: 0;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
        }
    }
</style>
